
//详情页渲染
require.config({
  baseUrl: "../js/library", //基础路径
  paths: {
    jquery: "jquery",
    axios: "axios",
  },
  //shim用于第三方插件的依赖
  shim: {},
});
require(['axios', 'jquery'], function (axios, $) {

  let id = location.search.split('=')[1];
  // console.log(id);
  axios.get('../product/getitem', {
      params: {
        id,
      },
    }).then(res => {

      let data=res.data[0];
      let pic =JSON.parse(data.picture);
     let template=`
 
     <div class="goods-1">
       <img src="../${pic[1].src}">
       <div class="mask"></div>
       <div class="big">
         <img src="../img/shop/goods-1.png" alt="" class="bigimg">
       </div>
     </div>

     <div>
       <img src="../img/shop/goods-2.jpg" alt="">
       <div class="mask"></div>
       <div class="big">
         <img src="../img/shop/goods-1.png" alt="" class="bigimg">
       </div>
     </div>
     <div>
       <img src="../img/shop/goos-3.jpg" alt="">
     </div>
     <div>
       <img src="../img/shop/goods-4.jpg" alt="">
     </div>
     <div>
       <img src="../img/shop/goods-5.jpg" alt="">
     </div>
     <ul class="left-five-pic">
       <li class="active"><a href="javascript:;">
           <img src="../img/shop/goods-1.png" alt="">
         </a></li>
       <li><a href="javascript:;">
           <img src="../img/shop/goods-2.jpg" alt="">
         </a></li>
       <li><a href="javascript:;">
           <img src="../img/shop/goos-3.jpg" alt="">
         </a></li>
       <li><a href="javascript:;">
           <img src="../img/shop/goods-4.jpg" alt="">
         </a></li>
       <li><a href="javascript:;">
           <img src="../img/shop/goods-5.jpg" alt="">
         </a></li>
     </ul>
     <p>
       <span class="iconfont icon-paixu"> 对比</span>
       <span class="iconfont icon-fenxiang"> 分享</span>
       <span class="iconfont icon-guanzhu-yiguanzhu"> 关注</span>
     </p>
   </div>
    <div class="qiandao">
        <p><span>参考价</span> <span><del>￥11.9</del></span></p>
        <p> <span>活动价</span><span>￥${data.price}</span> <span>促销价</span> <span>降价通知</span></p>
        <img src="../img/shop/qiandao.gif" alt="">
        <img src="../img/shop/qiandaoma.jpg" alt="">
      </div>
      <div class="p-num">
      剩余数量:${data.num}
      <p class="num">
      数量
    <span>—</span> <span>1</span> <span>+</span>
    </p>

    <button class="btn1">立即购买</button>
    <button class="btn2">加入购物车</button>
    <div class="detail-center">
   ${data.details}
   </div>
     `;
     $('.left-goods').html(template);
let temp =`
<div class="center-goods">
      <h1>${data.title}
      </h1>
      <i>维达官方正品</i>
      <div class="qiandao">
        <p><span>参考价</span> <span><del>￥11.9</del></span></p>
        <p> <span>活动价</span><span>￥${data.price}</span> <span>促销价</span> <span>降价通知</span></p>
        <img src="../img/shop/qiandao.gif" alt="">
        <img src="../img/shop/qiandaoma.jpg" alt="">

      </div>
      <span>优惠</span>
      <span>可参加以下优惠活动</span>
      <p>
        100%刮中券，最高50元无敌券 <a href=""> 立即去刮奖></a>
      </p>
      <p>
        <span>优惠换购</span>

        满59.00元加11.90元换购,可在购物车换购热销商品
      </p>
      <p><span>实名有礼</span>
        实名认证领苏宁支付券登录后查看 ></p>
      <p><span>送至</span>
        浙江杭州上城区全区
        有货免运费，实际以提交订单页为准。</p>
      <p>现在付款，预计48小时内为您发货 由 维达纸品旗舰店 从 江门市 销售和发货，并提供售后服务 联系客服</p>
      <span>超韧主推</span>
       <ul class="four-choice">
         
      <li><a href="#">
        <img src="../img/shop/goods-1.png" alt="">
        <span>超韧120抽4包</span>
      </a></li>
      <li><a href="#">
        <img src="../img/shop/goods-2.jpg" alt="">
        <span>超韧s码超韧130抽24包</span>
      </a></li>
      <li><a href="#">
        <img src="../img/shop/goos-3.jpg" alt="">
        <span>超韧s码150抽24包</span>
      </a></li>
      <li><a href="#">
        <img src="../img/shop/goods-4.jpg" alt="">
        <span>超韧m码150抽24包</span>
      </a></li>
      
    </ul>
    <p class="num">
      数量
    <span>—</span> <span>1</span> <span>+</span>
    </p>
    <button class="btn1">立即购买</button>
    <button class="btn2">加入购物车</button>
    </div>
   
  </div>
`;
$('.center-goods').html(temp);
//购物车选择

$('.num>span:eq(0)').on('click',function(){
  let num=0;
  if(num>0){
    $('.num>span:eq(1)').html(num--);
  }
  

});

$('.num>span:eq(2)').on('click',function(){
  num++;
  
  $('.num>span:eq(1)').html(num);

});
 let teps =`
 <div class="detail-center">
      <img src="../img/shop/center-1.jpg" alt="">
      ${data.details}
      ${data.details}
      ${data.details}
    </div>
 `;   
 $('.detail-center').html(teps);
    //放大镜
let even = document.querySelector('.goods-1');
let mask = document.querySelector('.mask');
let big = document.querySelector('.big');

even.addEventListener('mouseover', function () {
  mask.style.display = 'block';
  big.style.display = 'block';
});
even.addEventListener('mouseout', function () {
  mask.style.display = 'none';
  big.style.display = 'none';
});
even.addEventListener('mousemove', function (e) {
  let x = e.pageX - even.offsetLeft;
  let y = e.pageY - even.offsetTop;
  let maskx = (x - 190 - mask.offsetWidth / 2);
  let masky = (y - 342 - mask.offsetHeight / 2);
  let maskMax = even.offsetWidth - mask.offsetWidth;
  if (maskx < 0) {
    maskx = 0;
  } else if (maskx >= maskMax) {
    maskx = maskMax;
  };
  if (masky < 0) {
    masky = 0;
  } else if (masky >= maskMax) {
    masky = maskMax;
  };
  mask.style.left = maskx + 'px';
  mask.style.top = masky + 'px';

  // 放大镜的大图
  let bigImg = document.querySelector('.bigimg')
  let bigMax = bigImg.offsetWidth - big.offsetWidth;
  let bigX = maskx * bigMax / maskMax;
  let bigY = masky * bigMax / maskMax;
  bigImg.style.left = -bigX + 'px';
  bigImg.style.top = -bigY + 'px';
});

require.config({
  baseUrl: "../js/library",
  paths: {
    jquery: "jquery",
    axios: "axios",
  },
  shim: {},
});
require(["jquery"], function ($) {
 
  $('.left-goods>ul>li').on('mouseover', function () {
    $(this).addClass('active').siblings().removeClass('active');
    let _index = $('.left-goods>ul>li').index(this);
    $('.left-goods>div').eq(_index).addClass("goods-1").siblings().removeClass("goods-1")
  });
  
});
    })
    .catch(err => {
      console.log(err);
    });

});

